<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3790115" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">鉴定-线性</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">个人中心</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">支付宝支付</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">地址</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">手机</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe723;</span>
                <div class="name">关闭1</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">钱包</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">苹果</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">微博</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">AK-YK_感叹号</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe887;</span>
                <div class="name">QQ-circle-fill</div>
                <div class="code-name">&amp;#xe887;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeca0;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xeca0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">微博</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">历史记录</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe717;</span>
                <div class="name">草稿箱</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">勾</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">勾</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bd;</span>
                <div class="name">对勾小</div>
                <div class="code-name">&amp;#xe8bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ca;</span>
                <div class="name">减号-b</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">减号</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">分类</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c4;</span>
                <div class="name">213收藏-copy</div>
                <div class="code-name">&amp;#xe8c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">加</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">3.1收藏</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73d;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe806;</span>
                <div class="name">确认 勾</div>
                <div class="code-name">&amp;#xe806;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">卡券</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">左箭头</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">地址</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">007评论</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">上箭头</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe731;</span>
                <div class="name">下箭头</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c2;</span>
                <div class="name">213收藏</div>
                <div class="code-name">&amp;#xe8c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">播放器-播放_44</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe718;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">筛选</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">加号</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83f;</span>
                <div class="name">爱心</div>
                <div class="code-name">&amp;#xe83f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe85c;</span>
                <div class="name">爱心</div>
                <div class="code-name">&amp;#xe85c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">会员</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">对勾</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">左箭头</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">向上箭头</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">圆勾</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">icon_对勾中</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">左箭头</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74a;</span>
                <div class="name">收藏清单</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72d;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">三角形_下</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">三角形_上</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b5;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">正确-勾</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c3;</span>
                <div class="name">向上箭头-copy</div>
                <div class="code-name">&amp;#xe8c3;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1670070756847') format('woff'),
       url('iconfont.ttf?t=1670070756847') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-jianding-xianxing"></span>
            <div class="name">
              鉴定-线性
            </div>
            <div class="code-name">.icon-jianding-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenzhongxin"></span>
            <div class="name">
              个人中心
            </div>
            <div class="code-name">.icon-gerenzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-alipay"></span>
            <div class="name">
              支付宝支付
            </div>
            <div class="code-name">.icon-alipay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dizhi1"></span>
            <div class="name">
              地址
            </div>
            <div class="code-name">.icon-dizhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouji"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">.icon-shouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbi1"></span>
            <div class="name">
              关闭1
            </div>
            <div class="code-name">.icon-guanbi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qianbao"></span>
            <div class="name">
              钱包
            </div>
            <div class="code-name">.icon-qianbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pingguo"></span>
            <div class="name">
              苹果
            </div>
            <div class="code-name">.icon-pingguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weibo"></span>
            <div class="name">
              微博
            </div>
            <div class="code-name">.icon-weibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yk_gantanhao"></span>
            <div class="name">
              AK-YK_感叹号
            </div>
            <div class="code-name">.icon-yk_gantanhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-QQ-circle-fill"></span>
            <div class="name">
              QQ-circle-fill
            </div>
            <div class="code-name">.icon-QQ-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdan1"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icon-dingdan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weibo1"></span>
            <div class="name">
              微博
            </div>
            <div class="code-name">.icon-weibo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lishijilu_huaban"></span>
            <div class="name">
              历史记录
            </div>
            <div class="code-name">.icon-lishijilu_huaban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixin1"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-weixin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caogaoxiang"></span>
            <div class="name">
              草稿箱
            </div>
            <div class="code-name">.icon-caogaoxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gou"></span>
            <div class="name">
              勾
            </div>
            <div class="code-name">.icon-gou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gou1"></span>
            <div class="name">
              勾
            </div>
            <div class="code-name">.icon-gou1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duigouxiao"></span>
            <div class="name">
              对勾小
            </div>
            <div class="code-name">.icon-duigouxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianhaob"></span>
            <div class="name">
              减号-b
            </div>
            <div class="code-name">.icon-jianhaob
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianhao"></span>
            <div class="name">
              减号
            </div>
            <div class="code-name">.icon-jianhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenlei"></span>
            <div class="name">
              分类
            </div>
            <div class="code-name">.icon-fenlei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang-copy"></span>
            <div class="name">
              213收藏-copy
            </div>
            <div class="code-name">.icon-shoucang-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jia"></span>
            <div class="name">
              加
            </div>
            <div class="code-name">.icon-jia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-31shoucang"></span>
            <div class="name">
              3.1收藏
            </div>
            <div class="code-name">.icon-31shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-querengou"></span>
            <div class="name">
              确认 勾
            </div>
            <div class="code-name">.icon-querengou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiaquan"></span>
            <div class="name">
              卡券
            </div>
            <div class="code-name">.icon-qiaquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuojiantou"></span>
            <div class="name">
              左箭头
            </div>
            <div class="code-name">.icon-zuojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dizhi"></span>
            <div class="name">
              地址
            </div>
            <div class="code-name">.icon-dizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-007pinglun"></span>
            <div class="name">
              007评论
            </div>
            <div class="code-name">.icon-007pinglun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangjiantou"></span>
            <div class="name">
              上箭头
            </div>
            <div class="code-name">.icon-shangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiajiantou"></span>
            <div class="name">
              下箭头
            </div>
            <div class="code-name">.icon-xiajiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              213收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofangqi-bofang"></span>
            <div class="name">
              播放器-播放_44
            </div>
            <div class="code-name">.icon-bofangqi-bofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo1"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shaixuan"></span>
            <div class="name">
              筛选
            </div>
            <div class="code-name">.icon-shaixuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiahao"></span>
            <div class="name">
              加号
            </div>
            <div class="code-name">.icon-jiahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdan"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icon-dingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aixin"></span>
            <div class="name">
              爱心
            </div>
            <div class="code-name">.icon-aixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aixin1"></span>
            <div class="name">
              爱心
            </div>
            <div class="code-name">.icon-aixin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyuan"></span>
            <div class="name">
              会员
            </div>
            <div class="code-name">.icon-huiyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang_2"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-fenxiang_2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duigou"></span>
            <div class="name">
              对勾
            </div>
            <div class="code-name">.icon-duigou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche1"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuojiantou1"></span>
            <div class="name">
              左箭头
            </div>
            <div class="code-name">.icon-zuojiantou1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youjiantou"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.icon-youjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kefu"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.icon-kefu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangshangjiantou"></span>
            <div class="name">
              向上箭头
            </div>
            <div class="code-name">.icon-xiangshangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuangou"></span>
            <div class="name">
              圆勾
            </div>
            <div class="code-name">.icon-yuangou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_duigouzhong"></span>
            <div class="name">
              icon_对勾中
            </div>
            <div class="code-name">.icon-icon_duigouzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo2"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuojiantou2"></span>
            <div class="name">
              左箭头
            </div>
            <div class="code-name">.icon-zuojiantou2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo1"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucangqingdan"></span>
            <div class="name">
              收藏清单
            </div>
            <div class="code-name">.icon-shoucangqingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sanjiaoxing_shang"></span>
            <div class="name">
              三角形_下
            </div>
            <div class="code-name">.icon-sanjiaoxing_shang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sanjiaoxing_shang-copy"></span>
            <div class="name">
              三角形_上
            </div>
            <div class="code-name">.icon-sanjiaoxing_shang-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofang"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.icon-bofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youjiantou1"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.icon-youjiantou1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhengque-gou"></span>
            <div class="name">
              正确-勾
            </div>
            <div class="code-name">.icon-zhengque-gou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangshangjiantou-copy"></span>
            <div class="name">
              向上箭头-copy
            </div>
            <div class="code-name">.icon-xiangshangjiantou-copy
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianding-xianxing"></use>
                </svg>
                <div class="name">鉴定-线性</div>
                <div class="code-name">#icon-jianding-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenzhongxin"></use>
                </svg>
                <div class="name">个人中心</div>
                <div class="code-name">#icon-gerenzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alipay"></use>
                </svg>
                <div class="name">支付宝支付</div>
                <div class="code-name">#icon-alipay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dizhi1"></use>
                </svg>
                <div class="name">地址</div>
                <div class="code-name">#icon-dizhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouji"></use>
                </svg>
                <div class="name">手机</div>
                <div class="code-name">#icon-shouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi1"></use>
                </svg>
                <div class="name">关闭1</div>
                <div class="code-name">#icon-guanbi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianbao"></use>
                </svg>
                <div class="name">钱包</div>
                <div class="code-name">#icon-qianbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pingguo"></use>
                </svg>
                <div class="name">苹果</div>
                <div class="code-name">#icon-pingguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weibo"></use>
                </svg>
                <div class="name">微博</div>
                <div class="code-name">#icon-weibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yk_gantanhao"></use>
                </svg>
                <div class="name">AK-YK_感叹号</div>
                <div class="code-name">#icon-yk_gantanhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-QQ-circle-fill"></use>
                </svg>
                <div class="name">QQ-circle-fill</div>
                <div class="code-name">#icon-QQ-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan1"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icon-dingdan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weibo1"></use>
                </svg>
                <div class="name">微博</div>
                <div class="code-name">#icon-weibo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lishijilu_huaban"></use>
                </svg>
                <div class="name">历史记录</div>
                <div class="code-name">#icon-lishijilu_huaban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin1"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-weixin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caogaoxiang"></use>
                </svg>
                <div class="name">草稿箱</div>
                <div class="code-name">#icon-caogaoxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gou"></use>
                </svg>
                <div class="name">勾</div>
                <div class="code-name">#icon-gou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gou1"></use>
                </svg>
                <div class="name">勾</div>
                <div class="code-name">#icon-gou1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duigouxiao"></use>
                </svg>
                <div class="name">对勾小</div>
                <div class="code-name">#icon-duigouxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianhaob"></use>
                </svg>
                <div class="name">减号-b</div>
                <div class="code-name">#icon-jianhaob</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianhao"></use>
                </svg>
                <div class="name">减号</div>
                <div class="code-name">#icon-jianhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenlei"></use>
                </svg>
                <div class="name">分类</div>
                <div class="code-name">#icon-fenlei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang-copy"></use>
                </svg>
                <div class="name">213收藏-copy</div>
                <div class="code-name">#icon-shoucang-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jia"></use>
                </svg>
                <div class="name">加</div>
                <div class="code-name">#icon-jia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31shoucang"></use>
                </svg>
                <div class="name">3.1收藏</div>
                <div class="code-name">#icon-31shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-querengou"></use>
                </svg>
                <div class="name">确认 勾</div>
                <div class="code-name">#icon-querengou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiaquan"></use>
                </svg>
                <div class="name">卡券</div>
                <div class="code-name">#icon-qiaquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuojiantou"></use>
                </svg>
                <div class="name">左箭头</div>
                <div class="code-name">#icon-zuojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dizhi"></use>
                </svg>
                <div class="name">地址</div>
                <div class="code-name">#icon-dizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-007pinglun"></use>
                </svg>
                <div class="name">007评论</div>
                <div class="code-name">#icon-007pinglun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangjiantou"></use>
                </svg>
                <div class="name">上箭头</div>
                <div class="code-name">#icon-shangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiajiantou"></use>
                </svg>
                <div class="name">下箭头</div>
                <div class="code-name">#icon-xiajiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">213收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofangqi-bofang"></use>
                </svg>
                <div class="name">播放器-播放_44</div>
                <div class="code-name">#icon-bofangqi-bofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo1"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shaixuan"></use>
                </svg>
                <div class="name">筛选</div>
                <div class="code-name">#icon-shaixuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiahao"></use>
                </svg>
                <div class="name">加号</div>
                <div class="code-name">#icon-jiahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icon-dingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aixin"></use>
                </svg>
                <div class="name">爱心</div>
                <div class="code-name">#icon-aixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aixin1"></use>
                </svg>
                <div class="name">爱心</div>
                <div class="code-name">#icon-aixin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyuan"></use>
                </svg>
                <div class="name">会员</div>
                <div class="code-name">#icon-huiyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang_2"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-fenxiang_2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duigou"></use>
                </svg>
                <div class="name">对勾</div>
                <div class="code-name">#icon-duigou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche1"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuojiantou1"></use>
                </svg>
                <div class="name">左箭头</div>
                <div class="code-name">#icon-zuojiantou1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#icon-youjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kefu"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#icon-kefu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangshangjiantou"></use>
                </svg>
                <div class="name">向上箭头</div>
                <div class="code-name">#icon-xiangshangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuangou"></use>
                </svg>
                <div class="name">圆勾</div>
                <div class="code-name">#icon-yuangou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_duigouzhong"></use>
                </svg>
                <div class="name">icon_对勾中</div>
                <div class="code-name">#icon-icon_duigouzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo2"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuojiantou2"></use>
                </svg>
                <div class="name">左箭头</div>
                <div class="code-name">#icon-zuojiantou2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo1"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucangqingdan"></use>
                </svg>
                <div class="name">收藏清单</div>
                <div class="code-name">#icon-shoucangqingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sanjiaoxing_shang"></use>
                </svg>
                <div class="name">三角形_下</div>
                <div class="code-name">#icon-sanjiaoxing_shang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sanjiaoxing_shang-copy"></use>
                </svg>
                <div class="name">三角形_上</div>
                <div class="code-name">#icon-sanjiaoxing_shang-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofang"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#icon-bofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou1"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#icon-youjiantou1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengque-gou"></use>
                </svg>
                <div class="name">正确-勾</div>
                <div class="code-name">#icon-zhengque-gou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangshangjiantou-copy"></use>
                </svg>
                <div class="name">向上箭头-copy</div>
                <div class="code-name">#icon-xiangshangjiantou-copy</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
